<template>
    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="50%" direction="rtl" v-model="show"
        :before-close="handleClose">
        <template #header>
            <div class="hm-box-title">拍品录入</div>
        </template>
        <el-form ref="lotRef" :model="formLot" :rules="rulesLot" style="width: 100%" :inline="true" label-width="135px" scroll-to-error>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="12">
                    <el-form-item label="下单时间" prop="placeAnOrderTime">
                        <el-date-picker value-format="YYYY-MM-DD" v-model="formLot.placeAnOrderTime" type="date"
                            placeholder="请选择下单时间" clearable style="width: 220px" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="收货日期" prop="receivingTime">
                        <el-date-picker value-format="YYYY-MM-DD" v-model="formLot.receivingTime" type="date"
                            placeholder="请选择下单时间" clearable style="width: 220px" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="12">
                    <el-form-item label="订单截图" prop="orderScreenshot">
                        <image-upload v-model="formLot.orderScreenshot" :limit="1" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="检测收获商品图" prop="testProductReceivingImg">
                        <image-upload v-model="formLot.testProductReceivingImg" :limit="1" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="12">
                    <el-form-item label="拍品支出" prop="lotPay">
                        <el-input v-model="formLot.lotPay" style="width: 220px" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="退货日期" prop="returnsTime">
                        <el-date-picker value-format="YYYY-MM-DD" v-model="formLot.returnsTime" type="date"
                            placeholder="请选择退货日期" clearable style="width: 220px" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="12">
                    <el-form-item label="转寄支出" prop="forwardPay">
                        <el-input v-model="formLot.forwardPay" style="width: 220px" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="退货单号" prop="returnsNo">
                        <el-input v-model="formLot.returnsNo" style="width: 220px" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="12">
                    <el-form-item label="是否收到货" prop="receiving">
                        <el-select v-model="formLot.receiving" placeholder="请选择" clearable style="width: 220px">
                            <el-option v-for="dict in receivingList" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="退货状态" prop="returnsStatus">
                        <el-select v-model="formLot.returnsStatus" placeholder="请选择" clearable style="width: 220px">
                            <el-option v-for="dict in returnsStatusList" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="12">
                    <el-form-item label="拍品检测结果" prop="lotTestResult">
                        <el-radio-group v-model="formLot.lotTestResult">
                            <el-radio label="0">合格</el-radio>
                            <el-radio label="1">不合格</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否有过售后" prop="afterSales">
                        <el-select v-model="formLot.afterSales" placeholder="请选择" clearable style="width: 220px">
                            <el-option v-for="dict in afterSalesList" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="12">
                    <el-form-item label="退款收入" prop="refundIncome">
                        <el-input v-model="formLot.refundIncome" style="width: 220px" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="hm-row3" :gutter="60">
                <el-col :span="24">
                    <el-form-item label="对比图片" prop="contrastImg">
                        <file-upload-drag v-model="formLot.contrastImg" :format="true" :fileType="fileType" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div style="display: flex; justify-content: flex-end;">
                <div>
                    <el-button type="primary" @click="cancel">取消</el-button>
                    <el-button type="primary" @click="confirmClick">保存</el-button>
                </div>
            </div>
        </template>
    </el-drawer>
</template>
<script setup name="LotRecord" lang="ts">
import { validateSpaceAndEmoji } from '@/utils/validate'
import { formLot } from '@/api/group/lot/types'

const fileType = ref(['png', 'jpg', 'jpeg'])

const lotRef = ref<ElFormInstance>();

const formLot = ref<formLot>({
    placeAnOrderTime: undefined,
    testProductReceivingImg: undefined,
    orderScreenshot: undefined,
    receivingTime: undefined,
    lotPay: undefined,
    returnsTime: undefined,
    forwardPay: undefined,
    returnsNo: undefined,
    receiving: undefined,
    returnsStatus: undefined,
    lotTestResult: undefined,
    afterSales: undefined,
    refundIncome: undefined,
});

const rulesLot = reactive({
    placeAnOrderTime: [{ required: true, message: '请选择下单时间', trigger: 'change' }],
    testProductReceivingImg: [{ required: true, message: '请上传检测收获商品图', trigger: 'change' }],
    orderScreenshot: [{ required: true, message: '请上传订单截图', trigger: 'change' }],
    receivingTime: [{ required: true, message: '请选择收货日期', trigger: 'change' }],
    lotPay: [
        { required: true, message: '请输入拍品支出', trigger: 'blur' },
        { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: '请输入正确的拍品支出:整数或者保留两位小数' }
    ],
    returnsTime: [{ required: true, message: '请选择退货日期', trigger: 'change' }],
    forwardPay: [
        { required: true, message: '请输入转寄支出', trigger: 'blur' },
        { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: '请输入正确的转寄支出:整数或者保留两位小数' }
    ],
    returnsNo: [{ required: true, message: '请输入退货单号', trigger: 'blur' }, { validator: validateSpaceAndEmoji, }],
    receiving: [{ required: true, message: '请选择是否收到货', trigger: 'change' }],
    returnsStatus: [{ required: true, message: '请选择退货状态', trigger: 'change' }],
    lotTestResult: [{ required: true, message: '请选择拍品检测结果', trigger: 'change' }],
    afterSales: [{ required: true, message: '请选择是否有过售后', trigger: 'change' }],
    refundIncome: [
        { required: true, message: '请输入退款收入', trigger: 'blur' },
        { pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/, message: '请输入正确的退款收入:整数或者保留两位小数' }
    ],
    contrastImg: [{ required: true, message: '请上传对比图片', trigger: 'change' }],
})

const receivingList = ref([
    {
        label: '是', value: '0'
    },
    {
        label: '否', value: '1'
    }
])
const returnsStatusList = ref([
    {
        label: '未退货', value: '0'
    },
    {
        label: '已退货', value: '1'
    }
])
const afterSalesList = ref([
    {
        label: '是', value: '0'
    },
    {
        label: '否', value: '1'
    }
])

/** 手动清除商品图片的验证 */
watch(
    () => formLot.value.orderScreenshot,
    async (val) => {
        if (val) {
            lotRef.value?.clearValidate(['orderScreenshot']);
        }
    }
);
watch(
    () => formLot.value.testProductReceivingImg,
    async (val) => {
        if (val) {
            lotRef.value?.clearValidate(['testProductReceivingImg']);
        }
    }
);
watch(
    () => formLot.value.contrastImg,
    async (val) => {
        if (val) {
            lotRef.value?.clearValidate(['contrastImg']);
        }
    }
);

const props = defineProps({
    lotRecordVisible: {
        type: Boolean,
        default: false
    },
    lotRecordData: {
        type: Object,
        default: false
    }
});
const show = computed(() => props.lotRecordVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    emits('doClose')
}

/** 取消 */
const cancel = () => {
    handleClose();
}
/** 保存 */
const confirmClick = () => {
    lotRef.value?.validate(async (valid: boolean) => {
        if (valid) {

            // handleClose();
        }
    })
}
</script>

<style scoped lang="scss">
.product_image {
    .label {
        width: 105px;
        text-align: right;
    }
}
</style>
